<script setup>
import {defineProps} from 'vue'

let props = defineProps({
  message: String
})
let qr = () => {
  emit('close', false)
}
const emit = defineEmits(['close'])
</script>

<template>
  <div class="popupBox">
    <div class="message">{{ message }}</div>
    <div class="btn">
      <button @click="qr">确认</button>
    </div>
  </div>
</template>

<style scoped>
.popupBox {
  border-radius: 50px;
  width: 80%;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #fff8f8;
  transform: translate(-50%, -50%);
  z-index: 1000;
  opacity: 0.9;
  box-shadow: #b1b1b1 3px 3px 3px;
}

.popupBox .message {
  color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 20%;
}

.popupBox .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top:30%
}

.popupBox button {
  width: 300px;
  border: none;
  height: 100px;
  border-radius: 30px;
  background-color: red;
  color: #ffcccc;
}
</style>